<template>
	<view>
		<TopNav title="详情" bg-color="#fff"></TopNav>
		<view class="main">
			<view class="radius bg-white p-10">
				<view class="flex justify-between p-b10" v-for="item in detailData.goods || []" :key="item.id">
					<view class="flex shrink-0">
						<image :src="item.image || '/static/logo.png'"
							class="width-80 height-80 shrink-0 bg-gray radius" mode=""></image>
						<view class="flex flex-direction justify-start p-l16">
							<text class="f-s16 m-t5 f-w600">{{item.name}}</text>
							<view class="m-t25">
								<text class="text-theme f-s18 text-bold">{{item.price}}</text>
								<text class="p-l3 text-grey">/{{item.unit}}</text>
							</view>
						</view>
					</view>
					<view class="self-end">
						<text class="f-s16">×{{item.num}}</text>
					</view>
				</view>
				<view class="line m-t10 m-b10">

				</view>
				<view class="text-right">
					<text class="f-s12 text-black">合计金额</text>
					<text class="m-l6 text-theme text-bold f-s16 line-height20">¥{{detailData.pay_money}}</text>
				</view>
			</view>
			<view class="flex justify-between align-center bg-white radius m-t10" @click="handleToAddress">
				<view class="flex-1 p-15 f-s16">
					<view class="flex">
						<text class="f-s16 f-w600">{{detailData.realname}}</text>
						<text class="p-l8">{{detailData.mobile}}</text>
					</view>
					<view class="m-t8">
						<text>{{detailData.province}}{{detailData.city}}{{detailData.district}}{{detailData.address}}</text>
					</view>
				</view>
			</view>
			<view class="bg-white radius m-t10 p-12">
				<view class="flex justify-between line-height20 f-s14 f-w400">
					<text class="text-grey self-start shrink-0">订单编号</text>
					<text class="p-l18">{{detailData.order_sn}}</text>
				</view>
				<view class="flex justify-between line-height20 f-s14 f-w400 m-t12">
					<text class="text-grey self-start shrink-0">下单时间</text>
					<text class="p-l18">{{detailData.create_time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderDetail
	} from "@/api/mine/shopping.js"
	export default {
		data() {
			return {
				detailData: {},
				queryParams: {
					order_sn: ''
				}
			}
		},
		onLoad(query) {
			this.queryParams.order_sn = query.id
			this.getDetail()
		},
		methods: {
			getDetail() {
				orderDetail(this.queryParams).then(res => {
					this.detailData = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 20rpx 32rpx;
	}

	.self-btn {
		// background-color: #FE3F59;
		border-radius: 50rpx;
	}
</style>